<template>
  <div class="topic-article-page">
    <!-- 文章详情弹窗 -->
    <ArticleDetailModal 
      :visible="showArticleModal"
      :article="selectedArticle"
      :isAdded="isArticleAdded"
      @close="closeArticleModal"
      @confirm="confirmAddArticle"
    />
    
    <!-- 添加素材弹窗 -->
    <AddMaterialModal 
      :visible="showAddMaterialModal"
      @close="closeAddMaterialModal"
      @confirm="confirmAddMaterial"
    />
    
    <!-- 加载蒙层 -->
    <LoadingOverlay 
      :visible="isLoading"
      :message="loadingMessage"
    />
    
    <!-- 左侧面板 -->
    <div class="left-panel">
      <div class="search-section">
        <h3>文章搜索</h3>
        <div class="search-container">
          <input 
            v-model="searchKeyword" 
            @input="handleSearch"
            placeholder="输入关键词搜索文章..."
            class="search-input"
          />
        </div>
        
        <!-- 搜索结果下拉列表 -->
        <div v-if="searchResults.length > 0" class="search-results">
          <div 
            v-for="article in searchResults" 
            :key="article.id"
            class="search-result-item"
            @click="showArticleDetail(article)"
          >
            <div class="article-title">{{ article.title }}</div>
            <div class="article-summary">{{ article.summary }}</div>
          </div>
        </div>
      </div>

      <!-- 已添加的文章列表 -->
      <div class="added-articles-section">
        <h3>已添加文章 ({{ addedArticles.length }})</h3>
        <div class="articles-list">
          <div 
            v-for="article in addedArticles" 
            :key="article.id"
            class="article-item"
          >
            <div class="article-content" @click="showArticleDetail(article)">
              <div class="article-title">{{ article.title }}</div>
              <div class="article-summary">{{ article.summary }}</div>
            </div>
            <button @click="removeArticle(article.id)" class="delete-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3,6 5,6 21,6"></polyline>
                <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 主题生成 -->
      <div class="topic-section">
        <h3>主题/框架生成</h3>
        <div class="topic-buttons">
          <button @click="generateTopic" class="generate-btn" :disabled="addedArticles.length === 0">
            生成主题
          </button>
          <button @click="showAddMaterial" class="add-material-btn">
            添加素材
          </button>
        </div>
        <textarea 
          v-model="generatedTopic" 
          placeholder="生成的主题将显示在这里..."
          class="topic-textarea"
        ></textarea>
      </div>

      <!-- 框架生成 -->
      <div class="framework-section">
        <button @click="generateFramework" class="generate-btn" :disabled="addedArticles.length === 0">
          生成框架
        </button>
        <textarea 
          v-model="generatedFramework" 
          placeholder="生成的框架将显示在这里..."
          class="framework-textarea"
        ></textarea>
      </div>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
      <!-- 历史记录 -->
      <div class="history-section">
        <h3>历史记录</h3>
        <div class="history-container" ref="historyContainer">
          <div class="history-list" ref="historyList">
            <div v-if="historyRecords.length === 0" class="no-history">
              暂无历史记录
            </div>
            <div 
              v-for="record in historyRecords" 
              :key="record.id || record._id"
              class="history-item"
              @click="loadHistoryRecord(record)"
            >
              <div class="history-content">{{ record.content || record.title || '无内容' }}</div>
              <div class="history-time">{{ formatTime(record.create_time || record.createdAt || new Date()) }}</div>
            </div>
          </div>
        </div>
        <div class="history-controls">
          <button 
            @click="changePage('prev')" 
            class="scroll-btn"
            :disabled="currentPage <= 1"
          >
            上一页
          </button>
          <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
          <button 
            @click="changePage('next')" 
            class="scroll-btn"
            :disabled="currentPage >= totalPages"
          >
            下一页
          </button>
        </div>
      </div>

      <!-- 文章生成 -->
      <div class="article-generation-section">
        <h3>文章生成</h3>
        <div class="generate-controls">
          <div class="length-input-group">
            <label for="article-length">文章长度:</label>
            <input 
              id="article-length"
              v-model.number="articleLength" 
              type="number" 
              min="100" 
              max="5000" 
              step="100"
              class="length-input"
              :disabled="isGenerating"
            />
            <span class="length-unit">字</span>
          </div>
          <div class="generate-buttons">
            <button @click="generateArticle" class="generate-article-btn" :disabled="!canGenerateArticle || isGenerating">
              {{ isGenerating ? '正在生成...' : '生成文章' }}
            </button>
            <button @click="generateScript" class="generate-script-btn" :disabled="!canGenerateArticle || isGenerating">
              {{ isGenerating ? '正在生成...' : '生成脚本' }}
            </button>
          </div>
        </div>
        <div class="article-display">
          <div v-if="streamingArticle || generatedArticle" class="article-text" v-html="streamingArticle || generatedArticle" ref="streamingArticleRef"></div>
          <div v-else-if="isGenerating" class="generating-indicator">
            <div class="loading-spinner"></div>
            <span>正在生成文章...</span>
          </div>
          <div v-else class="placeholder">
            点击"生成文章"按钮开始生成
          </div>
        </div>
      </div>
      <!-- 标题生成 -->
      <div class="title-generation-section">
        <div class="title-header">
          <div class="title-controls">
            <select v-model="titleStyle" class="title-select">
              <option value="">选择风格</option>
              <option value="小鸡">小鸡</option>
              <option value="房小团">房小团</option>
              <option value="购房通">购房通</option>
            </select>
            <select v-model="titleType" class="title-select">
              <option value="">选择类型</option>
              <option value="市场">市场</option>
              <option value="项目">项目</option>
              <option value="政策">政策</option>
            </select>
          </div>
          <button @click="generateTitle" class="generate-title-btn" :disabled="!generatedFramework || !titleStyle || !titleType">
            生成标题
          </button>
        </div>
        <div class="title-display">
          <div v-if="generatedTitle" class="title-text">{{ generatedTitle }}</div>
          <div v-else class="placeholder">点击"生成标题"按钮生成标题</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue';
import { 
  searchArticles, 
  generateTopic as generateTopicAPI, 
  generateFramework as generateFrameworkAPI, 
  generateTitle as generateTitleAPI,
  streamGenerateArticle,
  getHistoryRecords,
  saveHistoryRecord
} from '../api/topicArticleAPI.js';
import ArticleDetailModal from './ArticleDetailModal.vue';
import AddMaterialModal from './AddMaterialModal.vue';
import LoadingOverlay from './LoadingOverlay.vue';

// 响应式数据
const searchKeyword = ref('');
const searchResults = ref([]);
const addedArticles = ref([]);
const generatedTopic = ref(``);
const generatedFramework = ref(``);
const generatedArticle = ref('');
const streamingArticle = ref(''); // 用于流式显示
const articleLength = ref(500); // 文章长度，默认500字
const generatedTitle = ref(''); // 生成的标题
const isGenerating = ref(false);
const historyRecords = ref([]);
const historyContainer = ref(null);
const historyList = ref(null);
const currentPage = ref(1);
const totalPages = ref(1);
const pageSize = ref(5); // 每页显示数量
const showArticleModal = ref(false);
const selectedArticle = ref({});
const showAddMaterialModal = ref(false);
const isLoading = ref(false);
const loadingMessage = ref('正在处理中...');
let updateTimer = null; // 用于防抖更新
const streamingArticleRef = ref(null); // 用于滚动到最新内容
const titleStyle = ref('');
const titleType = ref('');

// 防抖更新函数
const debouncedUpdate = (content) => {
  if (updateTimer) {
    clearTimeout(updateTimer);
  }
  updateTimer = setTimeout(() => {
    streamingArticle.value = content;
    // 自动滚动到最新内容
    nextTick(() => {
      const articleDisplay = document.querySelector('.article-display');
      if (articleDisplay) {
        articleDisplay.scrollTop = articleDisplay.scrollHeight;
      }
    });
  }, 30); // 减少到30ms防抖
};

// 计算属性
const canGenerateArticle = computed(() => {
  return addedArticles.value.length > 0;
  // return addedArticles.value.length > 0 && generatedTopic.value && generatedFramework.value;
});

const isArticleAdded = computed(() => {
  return selectedArticle.value.id && addedArticles.value.find(item => item.id === selectedArticle.value.id);
});

// 搜索文章
const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    searchResults.value = [];
    return;
  }

  try {
    const response = await searchArticles(searchKeyword.value);
    searchResults.value = response;
  } catch (error) {
    console.error('搜索失败:', error);
    searchResults.value = [];
  }
};

// 显示文章详情弹窗
const showArticleDetail = (article) => {
  selectedArticle.value = { ...article };
  showArticleModal.value = true;
};

// 关闭文章详情弹窗
const closeArticleModal = () => {
  showArticleModal.value = false;
  selectedArticle.value = {};
};

// 确认添加文章
const confirmAddArticle = (article) => {
  if (!addedArticles.value.find(item => item.id === article.id)) {
    addedArticles.value.push(article);
  }
  closeArticleModal();
  searchResults.value = [];
  searchKeyword.value = '';
};

// 添加文章（保留原有函数以兼容其他可能的调用）
const addArticle = (article) => {
  if (!addedArticles.value.find(item => item.id === article.id)) {
    addedArticles.value.push(article);
    searchResults.value = [];
    searchKeyword.value = '';
  }
};

// 显示添加素材弹窗
const showAddMaterial = () => {
  showAddMaterialModal.value = true;
};

// 关闭添加素材弹窗
const closeAddMaterialModal = () => {
  showAddMaterialModal.value = false;
};

// 确认添加素材
const confirmAddMaterial = (material) => {
  addedArticles.value.push(material);
  closeAddMaterialModal();
};

// 删除文章
const removeArticle = (articleId) => {
  const index = addedArticles.value.findIndex(article => article.id === articleId);
  if (index > -1) {
    addedArticles.value.splice(index, 1);
  }
};

// 生成主题
const generateTopic = async () => {
  if (addedArticles.value.length === 0) return;
  
  isLoading.value = true;
  loadingMessage.value = '正在生成主题，请稍候...';
  
  try {
    const result = await generateTopicAPI(addedArticles.value);
    generatedTopic.value = result.data;
  } catch (error) {
    console.error('生成主题失败:', error);
    alert('生成主题失败，请重试');
  } finally {
    isLoading.value = false;
  }
};

// 生成框架
const generateFramework = async () => {
  if (addedArticles.value.length === 0) return;
  
  if (!generatedTopic.value.trim()) {
    alert('请先生成主题');
    return;
  }
  
  isLoading.value = true;
  loadingMessage.value = '正在生成框架，请稍候...';
  
  try {
    const result = await generateFrameworkAPI(addedArticles.value, generatedTopic.value);
    console.log(result, 'framework result');
    generatedFramework.value = result.data;
  } catch (error) {
    console.error('生成框架失败:', error);
    alert('生成框架失败，请重试');
  } finally {
    isLoading.value = false;
  }
};

// 生成文章
const generateArticle = async () => {
  if (!canGenerateArticle.value) return;
  
  isGenerating.value = true;
  generatedArticle.value = '';
  streamingArticle.value = ''; // 清空流式显示内容
  
  // 取消之前的请求（如果有）
  if (window.topicArticleController) {
    window.topicArticleController.abort();
  }
  
  window.topicArticleController = new AbortController();
  
  let currentContent = ''; // 用于累积内容
  
  try {
    await streamGenerateArticle(
      addedArticles.value,
      generatedTopic.value,
      generatedFramework.value,
      articleLength.value,
      (chunk, isComplete = false) => {
        if (isComplete) {
          // 这是完整内容，替换而不是追加
          currentContent = chunk;
          generatedArticle.value = chunk;
        } else {
          // 这是token，追加到现有内容
          currentContent += chunk;
          generatedArticle.value += chunk;
        }
        
        // 使用防抖更新流式显示
        debouncedUpdate(currentContent);
      }
    );
    
    // 保存到历史记录
    await saveToHistory();
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('生成文章失败:', error);
      alert('生成文章失败，请重试');
    }
  } finally {
    isGenerating.value = false;
    window.topicArticleController = null;
  }
};

// 生成脚本
const generateScript = async () => {
  if (!canGenerateArticle.value) return;
  
  isGenerating.value = true;
  generatedArticle.value = '';
  streamingArticle.value = ''; // 清空流式显示内容
  
  // 取消之前的请求（如果有）
  if (window.topicArticleController) {
    window.topicArticleController.abort();
  }
  
  window.topicArticleController = new AbortController();
  
  let currentContent = ''; // 用于累积内容
  
  try {
    await streamGenerateArticle(
      addedArticles.value,
      generatedTopic.value,
      generatedFramework.value,
      articleLength.value,
      (chunk, isComplete = false) => {
        if (isComplete) {
          // 这是完整内容，替换而不是追加
          currentContent = chunk;
          generatedArticle.value = chunk;
        } else {
          // 这是token，追加到现有内容
          currentContent += chunk;
          generatedArticle.value += chunk;
        }
        
        // 使用防抖更新流式显示
        debouncedUpdate(currentContent);
      },
      true // 传递is_script参数
    );
    
    // 保存到历史记录
    await saveToHistory();
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('生成脚本失败:', error);
      alert('生成脚本失败，请重试');
    }
  } finally {
    isGenerating.value = false;
    window.topicArticleController = null;
  }
};

// 生成标题
const generateTitle = async () => {
  isLoading.value = true;
  loadingMessage.value = '正在生成标题，请稍候...';
  try {
    const result = await generateTitleAPI(titleStyle.value, titleType.value, generatedFramework.value);
    generatedTitle.value = result.res;
  } catch (error) {s
    console.error('生成标题失败:', error);
    alert('生成标题失败，请重试');
  } finally {
    isLoading.value = false;
  }
};


// 保存到历史记录
const saveToHistory = async () => {
  // 生成文章后自动刷新历史记录列表
  await loadHistoryRecords();
};

// 加载历史记录
const loadHistoryRecords = async () => {
  try {
    const data = await getHistoryRecords(currentPage.value);
    console.log(data, 'history records');
    
    // 适配不同的数据结构
    if (data.data && Array.isArray(data.data)) {
      // 如果数据在 data.data 中
      historyRecords.value = data.data;
      totalPages.value = Math.ceil((data.total || data.data.length) / pageSize.value) || 1;
    } else if (data.records && Array.isArray(data.records)) {
      // 如果数据在 data.records 中
      historyRecords.value = data.records;
      totalPages.value = Math.ceil((data.total || data.records.length) / pageSize.value) || 1;
    } else if (Array.isArray(data)) {
      // 如果数据直接是数组
      historyRecords.value = data;
      totalPages.value = Math.ceil(data.length / pageSize.value) || 1;
    } else {
      // 默认情况
      historyRecords.value = [];
      totalPages.value = 1;
    }
    
    console.log('处理后的历史记录:', historyRecords.value);
    console.log('总页数:', totalPages.value);
  } catch (error) {
    console.error('加载历史记录失败:', error);
    historyRecords.value = [];
    totalPages.value = 1;
  }
};

// 切换页面
const changePage = async (direction) => {
  if (direction === 'prev' && currentPage.value > 1) {
    currentPage.value--;
  } else if (direction === 'next' && currentPage.value < totalPages.value) {
    currentPage.value++;
  }
  
  await loadHistoryRecords();
};

// 加载历史记录到编辑区域
const loadHistoryRecord = (record) => {
  console.log('正在加载历史记录:', record);
  
  // 加载主题
  if (record.point) {
    generatedTopic.value = record.point;
  }
  
  // 加载框架
  if (record.framework) {
    generatedFramework.value = record.framework;
  }
  
  // 加载文章内容
  if (record.content) {
    generatedArticle.value = record.content;
    streamingArticle.value = record.content;
  }
  
  // 加载文章列表（如果有）
  if (record.articles && Array.isArray(record.articles)) {
    addedArticles.value = [...record.articles];
  } else if (record.article_list && Array.isArray(record.article_list)) {
    addedArticles.value = [...record.article_list];
  }
  
  console.log('已加载历史记录完成');
};

// 格式化时间
const formatTime = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};



// 组件挂载时加载历史记录
onMounted(() => {
  loadHistoryRecords();
});

// 组件卸载时取消未完成的请求
onUnmounted(() => {
  if (window.topicArticleController) {
    window.topicArticleController.abort();
  }
  if (updateTimer) {
    clearTimeout(updateTimer);
  }
});
</script>

<style scoped>
.topic-article-page {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-height: 100%;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-height: 100%;
  overflow-y: auto;
}

h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

/* 搜索部分 */
.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 1;
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
}

.search-btn {
  padding: 12px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-btn:hover {
  background: #0056b3;
}

.search-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.search-result-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f8f9fa;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-result-item:hover {
  background: #f8f9fa;
}

.search-result-item:last-child {
  border-bottom: none;
}

.article-title {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.article-summary {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.4;
}

/* 已添加文章列表 */
.articles-list {
  max-height: 200px;
  overflow-y: auto;
}

.article-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #f8f9fa;
}

.article-content {
  flex: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 8px;
  border-radius: 6px;
}

.article-content:hover {
  background-color: #e9ecef;
}

.delete-btn {
  padding: 6px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.delete-btn:hover {
  background: #c82333;
}

/* 主题和框架部分 */
.topic-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.generate-btn {
  flex: 1;
  padding: 12px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.add-material-btn {
  flex: 1;
  padding: 12px;
  margin-bottom: 10px;
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.add-material-btn:hover {
  background: #138496;
}

.generate-btn:hover:not(:disabled) {
  background: #218838;
}

.generate-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.topic-textarea {
  width: 100%;
  min-height: 250px;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.topic-textarea:focus {
  outline: none;
  border-color: #007bff;
}

.framework-textarea {
  width: 100%;
  min-height: 700px;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.framework-textarea:focus {
  outline: none;
  border-color: #007bff;
}

/* 历史记录部分 */
.history-container {
  position: relative;
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 15px;
}

.history-list {
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 8px;
}

.history-item:hover {
  background: #e9ecef;
}

.history-content {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.4;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-time {
  font-size: 12px;
  color: #6c757d;
}

.no-history {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 20px;
}

.history-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.scroll-btn {
  padding: 8px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

.scroll-btn:hover:not(:disabled) {
  background: #5a6268;
}

.scroll-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #6c757d;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

/* 文章生成部分 */
.generate-controls {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  margin-bottom: 15px;
}

.length-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.length-input-group label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.length-input {
  width: 80px;
  padding: 8px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  transition: border-color 0.3s ease;
}

.length-input:focus {
  outline: none;
  border-color: #007bff;
}

.length-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.length-unit {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.generate-buttons {
  display: flex;
  gap: 12px;
}

.generate-article-btn,
.generate-script-btn {
  flex: 1;
  padding: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.generate-article-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.generate-script-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.generate-article-btn:hover:not(:disabled),
.generate-script-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.generate-article-btn:disabled,
.generate-script-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

.article-display {
  flex: 1;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  background: #f8f9fa;
  min-height: 600px;
  max-height: 800px;
  overflow-y: auto;
}

.generating-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6c757d;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.generated-content {
  height: 100%;
}

.article-text {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #2c3e50;
  font-size: 14px;
}

.placeholder {
  color: #6c757d;
  font-style: italic;
  text-align: center;
  margin-top: 50px;
}

/* 标题生成部分 */
.title-generation-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.title-header {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin-bottom: 10px;
}
.title-controls {
  display: flex;
  gap: 10px;
}
.title-select {
  padding: 8px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: #2c3e50;
  min-width: 100px;
  transition: border-color 0.3s ease;
}
.title-select:focus {
  outline: none;
  border-color: #007bff;
}

.title-display {
  min-height: 200px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.6;
  margin-top: 10px;
}

.title-text {
  font-weight: 600;
  color: #2c3e50;
  font-size: 18px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.generate-title-btn {
  flex: 1;
  padding: 15px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.generate-title-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.generate-title-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 